<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>登录</title>
      <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
      <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
      <link rel="stylesheet" href="./css/common.css" />
      <link rel="stylesheet" href="./css/login.css" />
   </head>
   <body class="application application-offset">
      <div class="container-fluid container-application">
         <div class="main-content position-relative">
            <!-- Page content -->
            <div class="page-content">
               <div class="min-vh-100 py-5 d-flex align-items-center">
                  <div class="w-100">
                     <div class="row justify-content-center">
                        <div class="col-sm-8 col-lg-4">
                           <div class="card shadow zindex-100 mb-0">
                              <div class="card-body px-md-5 py-5">
                                 <div class="mb-5">
                                    <h6 class="h3">传智教育-登录</h6>
                                 </div>
                                 <span class="clearfix"></span>
                                 <form role="form" autocomplete="off">
                                    <div class="form-group">
                                       <label class="form-control-label"
                                          >账号</label
                                       >
                                       <div
                                          class="input-group input-group-merge"
                                       >
                                          <div class="input-group-prepend">
                                             <span class="input-group-text"
                                                ><i class="bi bi-person"></i
                                             ></span>
                                          </div>
                                          <input
                                             name="username"
                                             type="text"
                                             class="form-control"
                                             id="input-email"
                                             placeholder="请输入账号"
                                          />
                                       </div>
                                    </div>
                                    <div class="form-group mb-4">
                                       <div
                                          class="d-flex align-items-center justify-content-between"
                                       >
                                          <div>
                                             <label class="form-control-label"
                                                >密码</label
                                             >
                                          </div>
                                          <div class="mb-2">
                                             <a
                                                href="javascript:;"
                                                class="small text-muted text-underline--dashed border-primary"
                                                >忘记密码</a
                                             >
                                          </div>
                                       </div>
                                       <div
                                          class="input-group input-group-merge"
                                       >
                                          <div class="input-group-prepend">
                                             <span class="input-group-text"
                                                ><i class="bi bi-key"></i
                                             ></span>
                                          </div>
                                          <input
                                             name="password"
                                             type="password"
                                             class="form-control"
                                             id="input-password"
                                             placeholder="请输入密码"
                                          />
                                          <div class="input-group-append">
                                             <span class="input-group-text">
                                                <a
                                                   href="javascript:;"
                                                   data-toggle="password-text"
                                                   data-target="#input-password"
                                                >
                                                   <i
                                                      class="bi bi-eye-fill text-blue"
                                                   ></i>
                                                </a>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="mt-4">
                                       <button
                                          id="btn-login"
                                          type="button"
                                          class="btn btn-sm btn-info btn-icon btn-blue rounded-pill"
                                       >
                                          <span class="btn-inner--text"
                                             >登录</span
                                          >
                                          <span class="btn-inner--icon"
                                             ><i class="bi bi-arrow-right"></i
                                          ></span>
                                       </button>
                                    </div>
                                 </form>
                              </div>
                              <div class="card-footer px-md-5">
                                 <small>没有注册？</small>
                                 <a
                                    href="./register.html"
                                    class="small font-weight-bold text-blue"
                                    >创建账号</a
                                 >
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- toast -->
      <div
         class="position-fixed top-0 start-50 pt-4"
         style="z-index: 999; transform: translateX(-50%)"
      >
         <div id="myToast" class="toast bg-rgba">
            <div class="toast-body">提示消息</div>
         </div>
      </div>
      <script src="./bootstrap/bootstrap.min.js"></script>
      <script src="./lib/form-serialize.js"></script>
      <script src="./lib/axios.js"></script>
      <script src="./js/common.js"></script>
      <script>
         // ------------- 登录逻辑 -------------
         // 1 绑定点击事件
         document
            .querySelector("#btn-login")
            .addEventListener("click", async function () {
               // 2 获取数据 并判断 非空 长度
               const data = serialize(document.querySelector("form"), {
                  hash: true,
               })
               // console.log('data:', data)
               // 非空
               if (!data.username || !data.password) {
                  tip("用户名 或 密码不能为空")
                  return
               }
               // 去空格
               data.username = data.username.trim()
               data.password = data.password.trim()
               if (data.password.length < 6) {
                  tip("密码的长度大于等于6")
                  return
               }
               // 3 提交数据 await 如果要处理异常 可以通过 try-catch
               try {
                  // 4 获取响应结果 根据成功/失败 提示+跳转 / 提示
                  const res = await axios({
                     url: "/login",
                     method: "post",
                     data, // data:data
                  })
                  console.log("res:", res)
                  tip(res.message)
                  // 通过结构 简化取值
                  const {token, username} = res.data.data
                  // 跳转之前 保存 token 到缓存
                  localStorage.setItem("usertoken", token)
                  // 跳转之前 保存 用户名到缓存
                  localStorage.setItem("username", username)
                  // 跳转
                  window.location.href = "./index.html"
               } catch (error) {
                  // console.dir(error)
                  // 失败 只需要提示
                  tip(error.response.data.message)
               }
            })
      </script>
   </body>
</html>
